<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue'
import { ElTree } from 'element-plus'
import { getPage } from '../../../api/team'
import { handleTree } from '../../../utils/common'

interface Tree {
  id: number
  teamName: string
  children?: Tree[]
}

const filterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()

const defaultProps = {
  children: 'children',
  label: 'teamName'
}

const treeData = ref([])

const filterNode = (value: string, data: Tree) => {
  if (!value) return true
  return data.teamName.includes(value)
}

watch(filterText, (val) => {
  treeRef.value!.filter(val)
})

onMounted(() => {
  getPage().then(res => {
    const li = handleTree(res.list, undefined, undefined, undefined, undefined)
    treeData.value = li
  })
})

const clickNode = (node: any) => {
  console.log(node)
}

</script>

<template>
  <el-input v-model="filterText" placeholder="按名称过滤团队信息"/>

  <el-tree
      ref="treeRef"
      :data="treeData"
      :filter-node-method="filterNode"
      :props="defaultProps"
      default-expand-all
      @node-click="clickNode"
  />
</template>
